<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>充值明细</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			body {
				padding: 20px 15px 0;
			}
			.list-view > li:nth-last-child(1) .y-cutline {
				display: none;
			}
			.bill-details-item {
				height: 89px;
			}
			.left-content {
				text-align: right;
				width: 40px;
			}
			.cut-content {
				margin: 0px 15px 0;
			}
			.origin {
				height: 10px;
				width: 10px;
				border-radius: 50%;
			}
			/* 奇数颜色 */
			.origin.first {
				background-color: #ffb6a9;
			}
			/* 偶数 */
			.origin.second {
				background-color: #54b3f9;
			}
			/* 年的颜色 */
			.origin.thread {
				background-color: #70d2bc;
			}
			.line {
				background-color: #e6e6e6;
				width: 1px;
				height: 79px;
				margin-left: 4.5px;
			}
			.font1 {
				color: #989898;
				font-size: 12px;
			}
			.font2 {
				color: #555;
				font-size: 15px;
			}
			.font3 {
				color: #989898;
				font-size: 14px;
			}
			.font4 {
				color: #101010;
				font-size: 17px;
			}
			.font5 {
				color: #ff8000;
				font-size: 15px;
			}
			.font6 {
				color: #989898;
				font-size: 13px;
			}
			.bill-details-item .line2 {
				background-color: #e6e6e6;
				width: 1px;
				height: 10px;
				margin: 5px 0 5px 20px;
			}
			.bill-details-item .time-hm-start {
				margin-top: 14px;
			}
			.bill-details-item .time-sur {
				margin-top: 15px;
			}
			.pay-money {
				margin-top: 15px;
			}
			.pay-place {
				margin-top: 15px;
			}
			.pay-content {
				text-align: right;
			}
			.pay-result {
			}
			.pay-way {
				margin-top: 15px;
			}
			/*年之间的分割线*/
			.line3 {
				height: 24px;
			}
			.details-item-y {
			}
			/* 加载更多---------start */
			.load-more-content {
				height: 128px;
				width: 100%;
				line-height: 128px;
				text-align: center;
			}
			.load-more-content > img {
				height: 20px;
				width: 20px;
				vertical-align: middle;
			}
			.load-more-content > span {
				margin-left: 15px;
				color: #bfbfbf;
				font-size: 14px;
			}
			/* 加载更多---------end */
		</style>
	</head>
	<body>
		<!-- 子listview的item模板 -->
		<div id="sub-listview-item-temp" style="display: none;">
			<div class="flex-between">
				<div class="left-content">
					<div class="time-md font2">
						05.21
					</div>
					<div class="time-hm-start font1">
						14:20
					</div>
				</div>
				<div class="cut-content">
					<div class="origin first"></div>
					<div class="line"></div>
				</div>
				<div>
					<div class="pay-time font4">
						1h
					</div>
					<div class="pay-money font5">
						￥1.0
					</div>
				</div>
			</div>
			<div class="pay-content">
				<div class="pay-result font3">
					支付成功
				</div>
			</div>
		</div>
		</div> <!--父listview的item的模板-->
		<div id="listview-item-temp" style="display: none;">
			<ul class="sub-list-view"></ul>
			<div class="flex-start">
				<div class="font4 details-item-y left-content">
					2017
				</div>
				<div class="cut-content ">
					<div class="origin thread"></div>
					<div class="y-cutline line line3"></div>
				</div>
			</div>
		</div>
		<ul class="list-view"></ul>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/md5.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		var mUrl = 'http://l139.199.72.236:8080/proxyservice/TransferServlet';
		var mListViewIndex;
		var mSubListViewIndex;
		var mListView;
		var mListDatas;
		var mIsLoadMore = false;
		var mToken, mUserid;
		var mPageSize = 20;
		var mPageNum = 1;
		//服务器总页数
		var mPageCount = 0;
		apiready = function() {
			initData();
			initView();
			requestPayDetails(mToken, mUserid, mPageSize, mPageNum);
		};
		function initView() {
			mListView = document.getElementsByClassName('list-view')[0];
		}

		function initData() {
			mToken = api.pageParam.token;
			mUserid = api.pageParam.userid;
			mUrl = api.pageParam.url;
			mPageSize = 20;
			mPageNum = 1;
		}

		function skipToNetDetaisWin(data) {
			//没有点击事件
			//			api.openWin({
			//				name : 'details',
			//				url : './details.html',
			//				pageParam : data
			//			});
		}

		/**
		 * 请求上网明细接口
		 * @param {String} token - app token
		 * @param {String} userid - userid
		 * @param {int} pageSize - 每页显示的数据条数
		 * @param {int} pageNum - 第几页
		 */
		function requestPayDetails(token, userid, pageSize, pageNum) {
			console.log('requestPayDetails-----token, userid, pageSize, pageNum===' + token + ',' + userid + ',' + pageSize + ',' + pageNum);
			if (!mIsLoadMore) {
				api.showProgress({
				});
			}
			var params = {
				'userid' : userid,
				'pageSize' : pageSize,
				'pageNum' : pageNum
			};
			var keyword = 'deal_selectTransaction';
			var ps = MyRequest.createParam(params, token, userid, keyword);
			MyRequest.requestMethod(mUrl, ps, function(result) {
				console.log('requestPayDetails---result=' + JSON.stringify(result));
				if (!mIsLoadMore) {
					api.hideProgress();
				}
				analyzeRequestResponse(result);
			}, 'requestPayDetails');
		}

		/**
		 * 分析请求返回的数据
		 */
		function analyzeRequestResponse(result) {
			if (!result) {
				api.toast({
					msg : '连接服务器失败。'
				});
				if (mIsLoadMore) {
					//加载失败，页数不变。
					loadMoreTip(true);
				}
			} else {
				var code = result.code;
				mPageCount = result.pageCount;
				var datas = result.list;
				if (code == 0) {
					api.toast({
						msg : '失败'
					});
					if (mIsLoadMore) {
						//加载失败，页数不变。
						loadMoreTip(false);
					}
				} else if (code == 1) {
					datas = dealDatas(datas);
					if (mIsLoadMore) {
						//加载更多
						loadMoreListView(datas, dealMoreDatas(datas));
					} else {
						mListDatas = datas;
						//初始化展示
						initListView(datas);
					}
				} else {
					api.toast({
						msg : '异常'
					});
					if (mIsLoadMore) {
						//加载失败，页数不变。
						loadMoreTip(true);
					}
				}
			}
		}

		/**
		 * 处理数据，生成可用的数据 。
		 */
		function dealDatas(datas) {
			console.log('dealDatas---' + JSON.stringify(datas));
			var gData=convertTime(datas);
			console.log('gData---' + JSON.stringify(gData));
			var aDatas = setYear(gData);
			console.log('aDatas----' + JSON.stringify(aDatas));
			var bDatas = diffYear(aDatas);
			console.log('bDatas----' + JSON.stringify(bDatas));
			return bDatas;
		}

		/**
		 * 处理加载更多得到的数据
		 * @return true==有相同年的数据，显示view时需要特殊处理;
		 */
		function dealMoreDatas(datas) {
			var isSame = false;
			//判断datas第一个数据的年是否和总数据mListDatas的最后一个数据的年是否相同
			//相同，就将第一个年数据加入到最后一个年数据中，其它的数据就直接从总数据最后一年数据开始添加
			var moreFirstYDatas = datas[0];
			var moreFirstY = moreFirstYDatas.y;
			var sumLastYDatas = mListDatas[mListDatas.length - 1];
			var sumLastY = sumLastYDatas.y;
			var j = 0;
			if (moreFirstY == sumLastY) {
				isSame = true;
				for (var i = 0; i < moreFirstYDatas.datas.length; i++) {
					mListDatas[mListDatas.length - 1].datas.push(moreFirstYDatas.datas[i]);
				}
				j = 1;
			} else {
				j = 0
			}
			for (; j < datas.length; j++) {
				mListDatas.push(datas[j]);
			}
			return isSame;
		}

		/**
		 * 在原数据总增加年字段(y)，以便后续处理程序处理
		 */
		function setYear(datas) {
			var dl = datas.length;
			var date;
			var data;
			for (var i = 0; i < dl; i++) {
				data = datas[i];
				date = new Date(data.spendTime);
				data.y = date.getFullYear();
				data.md = fomatTime(date.getMonth() + 1) + '.' + fomatTime(date.getDate());
				data.hm = fomatTime(date.getHours()) + ':' + fomatTime(date.getMinutes());
			}
			return datas;
		}

		/**
		 * 将时间格式改为ios和android通用格式
		 */
		function convertTime(datas) {
			var data;
			for (var i = 0; i < datas.length; i++) {
				data = datas[i];
				data.spendTime=data.spendTime.replace(/-/g, "/");
			}
			return datas;
		}

		/**
		 * 区分年
		 * 检查每个数据的年是是否和前一个数据的年相同，
		 * 相同，就添加数据
		 * 不相同，就新建object，添加数据
		 */
		function diffYear(datas) {
			//容器
			var vessel = [];
			//年的容器
			var vessel2 = {
				'y' : 0,
				'datas' : []
			};
			var dl = datas.length;
			var i = 0;
			var y;
			var data;
			console.log('dl=' + dl);
			for (; i < dl; i++) {
				data = datas[i];
				if (i == 0) {
					y = data.y;
					vessel2.y = y;
					vessel2.datas.push(data);
					//首个数据,新装一个obj
					vessel.push(vessel2);
				} else {
					if (data.y != datas[i - 1].y) {
						y = data.y;
						//重新初始化
						vessel2 = {
							'y' : 0,
							'datas' : []
						};
						vessel2.y = y;
						vessel2.datas.push(data);
						//新装一个obj
						vessel.push(vessel2);
					} else {
						y = data.y;
						vessel2.y = y;
						vessel2.datas.push(data);
					}
				}
			}
			return vessel;
		}

		/**
		 * 格式化时间
		 */
		function fomatTime(time) {
			if (time < 10) {
				time = '0' + time;
			}
			return time;
		}

		/**
		 * 初始化展示listview
		 */
		function initListView(datas) {
			console.log('initListView');
			if (mListView != null) {
				mListView.innerHTML = '';
			}
			//年数
			var yl = datas.length;
			var i = 0;
			var li;
			//每年的数据
			for (; i < yl; i++) {
				li = createItem(datas[i]);
				mListView.appendChild(li);
			}
			listenerScrollBottom();
		}

		/**
		 * 创建listview的item
		 * @param {json} datas - 多年的总数据
		 */
		function createItem(datas) {
			var li = document.createElement('li');
			li.className = 'list-view-item';
			li.innerHTML = document.getElementById('listview-item-temp').innerHTML;
			var yCutline = li.getElementsByClassName('y-cutline')[0];
			var y = li.getElementsByClassName('details-item-y')[0];
			var yUl = li.getElementsByClassName('sub-list-view')[0];
			y.innerText = datas.y;
			var subDatas = datas.datas;
			for (var i = 0; i < subDatas.length; i++) {
				var subData = subDatas[i];
				var subLi = createSubItem(subData, i);
				yUl.appendChild(subLi);
			}
			return li;
		}

		/**
		 * 创建sub-listview的item
		 * @param {json} data - json数据(每年的数据)
		 * @param {int} index - li的index
		 */
		function createSubItem(data, index) {
			var li = document.createElement('li');
			li.className = 'sub-list-view-item bill-details-item flex-between';
			li.innerHTML = document.getElementById('sub-listview-item-temp').innerHTML;
			//月日
			var md = li.getElementsByClassName('time-md')[0];
			//开始时间
			var startT = li.getElementsByClassName('time-hm-start')[0];
			//交易时长
			var payTimes = li.getElementsByClassName('pay-time')[0];
			//交易的金额
			var payMoney = li.getElementsByClassName('pay-money')[0];
			//交易结果
			var payResult = li.getElementsByClassName('pay-result')[0];
			//原点
			var origin = li.getElementsByClassName('origin')[0];
			if (index % 2 == 0) {
				origin.className = 'origin first';
			} else {
				origin.className = 'origin second';
			}
			md.innerText = comJs.dataFaultTolerant(data.md);
			startT.innerText = comJs.dataFaultTolerant(data.hm);
			payTimes.innerText = comJs.dataFaultTolerant(parseInt(data.longTime / 60))+'h';
			payMoney.innerText = '￥' + comJs.dataFaultTolerant(data.spendCost);
			if (data.msg == null) {
				//支付成功
				payResult.innerText = '支付成功';
			} else {
				//支付失败
				payResult.innerText = comJs.dataFaultTolerant(data.msg);
			}
			li.onclick = function() {
				var lis = mListView.getElementsByClassName('list-view-item');
				var lisLen = lis.length;
				var i;
				var j;
				var subLis;
				var subLisLen;
				for ( i = 0; i < lisLen; i++) {
					subLis = lis[i].getElementsByClassName('sub-list-view-item');
					subLisLen = subLis.length;
					for ( j = 0; j < subLisLen; j++) {
						if (this == subLis[j]) {
							mListViewIndex = i;
							mSubListViewIndex = j;
							break;
						}
					}
				}
				skipToNetDetaisWin(mListDatas[mListViewIndex].datas[mSubListViewIndex]);
				console.log('---------mListViewIndex=' + mListViewIndex + '   mSubListViewIndex=' + mSubListViewIndex);
			}
			return li;
		}

		/**
		 * 加载更多的失败提示以及处理方法
		 * @param {Boolean} isFailure - 是否是失败了，是，不提示；否，提示没有更多数据。
		 */
		function loadMoreTip(isFailure) {
			//加载失败，页数不变。
			mPageNum--;
			if (!isFailure) {
				api.toast({
					msg : '没有更多数据了'
				});
			} else {
				api.toast({
					msg : '加载更多失败。'
				});
			}
			mIsLoadMore = false;
			hideLoadMoreView();
		}

		/**
		 * 加载更多，数据需要处理---------------------------------??????
		 * @param {json} datas - 加载更多得到的数据（处理后的）
		 * @param {boolean} isSame - 是否有相同年的数据，有的话，就要对之前的view的最后一个sublistview追加li
		 */
		function loadMoreListView(datas, isSame) {
			console.log('loadMoreListView---mListDatas=' + JSON.stringify(mListDatas));
			//判断datas第一个数据的年是否和总数据mListDatas的最后一个数据的年是否相同
			//相同，就将第一个年数据加入到最后一个年view中，其它的数据就直接从总数据最后一年view开始添加
			var moreFirstYDatas = datas[0];
			var moreFirstY = moreFirstYDatas.y;
			var lis;
			var lisLen;
			var lastsubUl;
			var subLi;
			var subLis;
			var subLisLen;
			var newLi;
			var j = 0;
			if (isSame) {
				for (var i = 0; i < moreFirstYDatas.datas.length; i++) {
					lis = mListView.getElementsByClassName('list-view-item');
					lisLen = lis.length;
					lastsubUl = lis[lisLen-1].getElementsByClassName('sub-list-view')[0];
					lastsubLis = lastsubUl.getElementsByClassName('sub-list-view-item');
					lastsubLisLen = lastsubLis.length;
					lastsubLi = createSubItem(moreFirstYDatas.datas[i], lastsubLisLen);
					lastsubUl.appendChild(lastsubLi);
				}
				//已经使用了datas的index==0的数据，那么加载其它数据就从1开始
				j = 1;
			} else {
				j = 0;
			}
			//加载其它的不同年的数据
			for (; j < datas.length; j++) {
				newLi = createItem(datas[j]);
				mListView.appendChild(newLi);
			}
			//加载完成之后，还原数据
			mIsLoadMore = false;
			hideLoadMoreView();
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (mListView.offsetHeight >= api.frameHeight && !mIsLoadMore && (mPageNum < mPageCount)) {
					mIsLoadMore = true;
					showLoadMoreView();
					requestPayDetails(mToken, mUserid, mPageSize, ++mPageNum)
				}
			});
		}
	</script>
</html>